<template>
  <div class="app" @touchstart="mouseover" @touchend="mouseout">
    <div class="chartLeft float" @click="numClick('add')">《</div>
    <div class="chartRight float" @click="numClick()">》</div>  
    <img v-for="(item,index) in arr" :src="item.imgs" v-show="index == num" :key="index" @load="imgLoad"/>
   <!-- <img src="../../assets/img/chart/1.webp"> -->
    <div class="itemfa">
      <div v-for="(item, index) in arr" class="items" :class="{ active: isActive(index) }" :key="index"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {  
     
        
      num: 0,
      clear: null,
    };
  },
  props:{
    arr:{
      type:Array
    }
  },
  methods: {
    imgLoad(){
      this.$emit('imgload')
    },
    state() {
      this.clear = setTimeout(() => {
        this.num++;
        this.state();
        if (this.num >= this.arr.length) {
          this.num = 0;
        }
      }, 2000);
    },
    numClick(ad) {
      if (ad) {
        if (this.num === 0) {
          this.num = this.arr.length;
        }
        this.num--;
      } else {
        this.num++;
        if (this.num === this.arr.length) {
          this.num = 0;
        }
      }
    },
    mouseover() {
      clearTimeout(this.clear);
    },
    mouseout() {
      this.state();
    },
  },
  computed: {
    isActive() {
      return function (index) {
        return index === this.num;
      };
    },
  },
  created() {
    this.state();
  },
};
</script>

<style>
.chartLeft {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
}

.chartRight {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  text-align: right;
}

.float {
  font-size: 20px;
}

.app {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* margin-top: 44px; */
  z-index: 20;
}
.app img {
  vertical-align: middle;
  width: 100%;
}
.items {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 6px;
}
.itemfa {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.active {
  background-color: #f00;
}
</style>